<template>
    <div class="container">
        <el-container>
            <el-header>受理信息+https://blog.csdn.net/weixin_45544358/article/details/100163375</el-header>
        <el-main>
            <el-form :label-width="labelWidth" :rules="rules" ref="items" :model="slxxdata">
                <el-form-item v-for='item in slxxform' :label="item.label" :key='item.prop'>
                    <!-- 输入框 -->
                    <el-input v-if="item.type==='Input'" v-model="slxxdata[item.prop]" size="mini" ></el-input>
                    <!-- 下拉框 -->
                    <el-select v-if="item.type==='Select'" v-model="slxxdata[item.prop]" size="mini" @change="item.change(slxxdata[item.prop])">
                        <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
                    </el-select>
                    <!-- 单选 -->
                    <el-radio-group v-if="item.type==='Radio'" v-model="slxxdata[item.prop]">
                        <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
                    </el-radio-group>
                    <!-- 单选按钮 -->
                    <el-radio-group v-if="item.type==='RadioButton'" v-model="slxxdata[item.prop]" @change="item.change && item.change(slxxdata[item.prop])">
                        <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio-button>
                    </el-radio-group>
                    <!-- 复选框 -->
                    <el-checkbox-group v-if="item.type==='Checkbox'" v-model="slxxdata[item.prop]" >
                        <el-checkbox v-for="ch in item.checkboxs" :label="ch.value" :key="ch.value">{{ch.label}}</el-checkbox>
                    </el-checkbox-group>
                    <!-- 日期 -->
                    <el-date-picker v-if="item.type==='Date'" v-model="slxxdata[item.prop]" ></el-date-picker>
                    <!-- 时间 -->
                    <el-time-select v-if="item.type==='Time'" v-model="slxxdata[item.prop]" type=''></el-time-select>
                    <!-- 日期时间 -->
                    <el-date-picker v-if="item.type==='DateTime'" type='datetime' v-model="slxxdata[item.prop]" :disabled="item.disable && item.disable(slxxdata[item.prop])"></el-date-picker>
                    <!-- 滑块 -->
                    <!-- <el-slider v-if="item.type==='Slider'" v-model="slxxdata[item.prop]"></el-slider> -->
                    <!-- 开关 -->
                    <el-switch v-if="item.type==='Switch'" v-model="slxxdata[item.prop]" ></el-switch>
                </el-form-item> 
                <div>
                    <el-button type="primary" @click="printData()">打印表单</el-button>
                </div>
            </el-form>
        </el-main>
        </el-container>
    </div>
</template>

<script> 


export default {
    name: "SlxxForm",   /** 受理信息组件 */ 
    components: {
    },

    props: {
        formOption: Object, 

        slxxform:{
            type:Array,
            default:[]
        },
        slxxdata:{
            type:Object,
            default:{}
        },



        label: {  // 按钮显示文本
            type: String,
            default: 'Button'
        },

        labelWidth:{
            type:String,
            default:'150px'
        },
        size:{
            type:String,
            default:'medium'
        },
    },
    data () {
        return {
            
            rules:{

            }
        }
    },
    computed: {},
    watch: {},
    methods: {
        printData: function () {
            this.$emit('showInput', this.slxxform) 
		},
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
    .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: left;
    line-height: 100px;
  }

  .el-main >>> .el-input {
      width: 240px;
  } 

</style>